<template>
	<yd-layout id='study' class=''>
		<div slot='top' class="header">
			<div class="header_label">学习</div>
			<div class="header_left">
				<img src="../../assets/search.png" alt="" />
				<div @click="$router.push({name:'search'})" class="input_btn">搜索你想要的~</div>
				<!--<input type="text" placeholder="搜索你想要的~" />-->
			</div>
			<div v-if="true" class="header_right" @click="$router.push({name:'message'})">
				<i v-if="unreadTotal>0"></i>
				<img src="../../assets/massage.png" alt="" />
			</div>
		</div>
		<div class="content">
			<div class="img_nav">
				<div class="nav_f" >
					<!--<div  class="nav_label">创业培训课</div>-->
					<!--allClass-->
					<img @click="goNextPage('allClass')" src="../../assets/nav_img_1.png" alt="" />
				</div>
				<div class="nav_f" >
					<!--<div v-if="groupList.length>1" class="nav_label">{{groupList[1].title}}运营集中营</div>
					<div v-else class="nav_label">运营集中营</div>-->
					<img @click="goNextPage('liveList')" src="../../assets/nav_img_2.png" alt="" />
				</div>
			</div>
			<div v-if='false' class="class_nav">
				<div class="nav_item" @click="goClassPage('allClass',item.id)" v-for="item in cateList">{{item.title}}</div>
			</div>
			<div class="live_title">
				<div class="live_left">精品课程推荐</div>
				<div v-if="false" class="live_right" @click="$router.push({name:'liveList'})">查看更多</div>
			</div>
			<div class="live_list">

				<yd-infinitescroll v-show='liveList.length>0' :callback="livingList" ref="infinitescrollDemo">
					<div slot="list" class="list" v-for="item in liveList" @click="goNext(item)">
						<div class="list_header">
							<div class="list_header_top">
								<img class="list_header_top_img" :src="item.avatar" alt="" />
								<span class="c_size_30_42 c_text_ellipsis_1">{{item.nick_name}}</span>
							</div>
							<div style="background: #DCBBC9;" v-if="item.status===0" class="list_header_bottom">
								<img class="list_header_bottom_img" src="../../assets/playGif.gif" alt="" />
								<span>直播中</span>
							</div>
							<div v-else-if="item.status===1" class="list_header_bottom" style="background: #6A798F;">
								<span>课程预告</span>
							</div>
							<div v-else class="list_header_bottom" style="background: #B5B5B5;">
								<span>回&nbsp;放</span>
							</div>
						</div>
						<div class="list_title c_text_ellipsis_2 c_size_34_48">{{item.title}}</div>
						<div class="list_bottom ">
							<div class="list_bottom_password">
								<span v-if="item.status!==1">
									{{item.status==0?item.member_total:item.pv}}人观看
								</span>
								<span class="c_text_ellipsis_1" v-else>直播时间：{{item.time}}</span>
								<div v-if="item.is_req_pwd==1&&item.member==1" class="password_paly" style="color: #FE5742;">会员加密直播</div>
								<div v-else-if='item.member==1' class="password_paly" style="color: #DCBBC9;">会员直播</div>
								<div v-else-if="item.is_req_pwd==1" class="password_paly" style="color: #DCBBC9;">设有密码</div>
							</div>

						</div>
					</div>
					<!-- 数据全部加载完毕显示 -->
					<span slot="doneTip">没有更多数据了~~</span>

					<!-- 加载中提示，不指定，将显示默认加载中图标 -->
					<!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
				</yd-infinitescroll>
				<NoList  v-show='liveList.length==0'>
					<img slot='img' src="../../assets/kong_3.png" alt="" />
				</NoList>
			</div>

			<template v-if="false">
				<div style="border-top: .2rem solid #FAFAFA;"></div>
				<div class="live_title">
					<div class="live_left">推荐课程</div>
					<!--@click="$router.push({name:'audioList'})"-->
					<div @click="inAbatch" class="live_right">
						<img src="../../assets/study_1.png" alt="" />
						<span>换一批</span>
					</div>
				</div>
				<div class="audio_list">
					<VideoList :dataList='videoList' :member='member' :class='indexVideoList'></VideoList>
				</div>
			</template>

		</div>
		<Footer slot='bottom' activeStr='study'></Footer>

		<!--输入密码-->
		<yd-popup v-model="showPop" position="center" :close-on-masker='false'>
			<div class="pop_nike_name">
				<div class="title c_size_34_48">请输入6位听课密码</div>
				<div class="label">*听课密码请联系领导人获取*</div>
				<div class="pop_nike_name_input">
					<input placeholder="输入密码" oninput="if(value.length>6)value=value.slice(0,6)" type="text" v-model="passwordNum" />
				</div>
				<ul class="c_size_34_48">
					<li @click="showPop=false">取消</li>
					<li @click="postPassword()">确定</li>
				</ul>
			</div>
		</yd-popup>

	</yd-layout>
</template>

<script>
	import Footer from '../../components/Footer/Footer.vue'
	import VideoList from '../../components/VideoList/VideoList.vue'
	import { Popup } from 'vue-ydui/dist/lib.rem/popup';
	import { InfiniteScroll } from 'vue-ydui/dist/lib.rem/infinitescroll';
	export default {
		components: {
			[Footer.name]: Footer,
			[VideoList.name]: VideoList,
			[Popup.name]: Popup,
			[InfiniteScroll.name]: InfiniteScroll,
		},
		data() {
			return {
				member: true,
				indexVideoList: 'index_video_list',
				liveList: [], //直播预告列表
				videoList: [], //视频列表
				cateList: [], //分类列表
				listObj: {},
				mineObj: {},
				showPop: false,
				passwordNum: '',
				unreadTotal: 0,
				pageNum: 1,
				diaLogNum: 0,
				groupList: [],
				liveList:[],
			}
		},
		created() {},
		watch: {
			diaLogNum: function(val, oldVal) {
				if(val >= 2) {
					//this.$dialog.loading.close();
				}

			}
		},
		computed: {

		},
		mounted() {
			document.title = '学习'
			this.getMine();
			//获取视频列表
			//this.getVideoIndex()
			this.getGroup()
			this.livingList()
			//			this.getCates()
		},
		methods: {
			//获取列表
			livingList() {
				this.$root.ajax({
					name: 'live/lst',
					type: 'get',
					params: {
						group_name:  '浠芮',
						page: this.pageNum,
						count: this.pageCount,
					}
				}).then((d) => {
					for(let a = 0; a < d.data.live_list.length; a++) {
						d.data.live_list[a].time = this.$root.getDate(new Date(d.data.live_list[a].start_time * 1000), {
							allTime: 2
						})
					}

					this.liveList = [...this.liveList, ...d.data.live_list];
					if(this.liveList.length >= d.data.live_total) {
						/* 所有数据加载完毕 */
						this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
						return;
					}

					/* 单次请求数据完毕 */
					this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

					this.pageNum++;

				})
			},
			//获取头部的两张图
			getGroup() {
				this.$root.ajax({
					name: 'group/lst',
					type: 'post',
					params: {

					}
				}).then((d) => {
					this.groupList = d.data.goup_list
					this.unreadTotal = d.data.unread_total
				})
			},
			inAbatch() {
				this.$root.ajax({
					name: 'video/rand',
					type: 'get',
					params: {

					}
				}).then((d) => {
					this.videoList = d.data;
				})
			},
			//请求首页接口
			getVideoIndex() {
				this.$root.ajax({
					name: 'video/index',
					type: 'get',
					closeAllLoading: false,
					params: {
						pid: 0
					}
				}).then((d) => {
					this.diaLogNum++
						if(d.data.cate_list.length >= 8) {
							this.cateList = d.data.cate_list.splice(0, 7);
							this.cateList.push({
								id: 0,
								title: '全部课程'
							})
						} else {
							this.cateList = d.data.cate_list
						}

					for(let a = 0; a < d.data.live_list.length; a++) {
						d.data.live_list[a].newTime = this.$root.getDate(new Date(d.data.live_list[a].begin_time * 1000), {
							str: '-',
							allTime: 2
						})
					}

					this.liveList = d.data.live_list;
					this.videoList = d.data.video_list;
					this.unreadTotal = d.data.unread_total
				})
			},
			getCates() {
				this.$root.ajax({
					name: 'video/cates',
					type: 'get',
					closeAllLoading: false,
					params: {
						pid: 0
					}
				}).then((d) => {
					this.diaLogNum++
						if(d.data.length >= 8) {
							this.cateList = d.data.splice(0, 7);
							this.cateList.push({
								id: 0,
								title: '全部课程'
							})
						} else {
							this.cateList = d.data
						}
				})
			},
			goClassPage(str, id) {
				this.$router.push({
					name: str,
					query: {
						id: id
					}
				})
			},
			goNextPage(str) {
				
				this.$router.push({
					name: str
				})
			},
			//去下一个页面，直播，回放，预播
			async goNext(item) {
				//判断权限
				let o = {
					room_id: item.id,
					name: 'live',
					msgRouter: true,
				};
				if(item.status === 0) {
					o.name = 'liveRoomDetail'
				}
				var data = await this.$root.liveFlg(o);
				//判断是否需要密码
				//清空密码
				this.listObj = {};
				//判断是否已经输入过密码  
				//is_req_pwd   是否需要密码，0：否，1：是
				//is_input_pwd	是否已输入过密码，0：否，1：是
				if(item.is_req_pwd == 1 && item.is_input_pwd != 1) {
					//弹出密码框
					this.showPop = true;
					this.listObj = Object.assign({}, this.listObj, item)
					this.passwordNum = ''
					return
				}

				if(item.status === 0) {
					this.$router.push({
						name: 'liveRoomDetail',
						query: {
							id: item.id,
						}
					})
				} else {
					this.$router.push({
						name: 'live',
						query: {
							id: item.id,
							kind: item.status,
						}
					})
				}
			},
			//输入密码
			async postPassword() {
				if(this.passwordNum.length == 6) {
					let o = {
						room_id: this.listObj.id,
						name: 'live',
						password: this.passwordNum,
						kind: this.listObj.status,
						passwordFlg:true,
					};
					if(this.listObj.status === 0) {
						o.name = 'liveRoomDetail'
					}
					var data = await this.$root.liveFlg(o);
				} else {
					this.$dialog.toast({
						mes: '请根据提示正确输入',
						timeout: 1500
					});
				}
			},
			//获取个人信息
			getMine() {
				this.$root.ajax({
					name: 'my',
					type: 'get',
					closeAllLoading: false,
					params: {}
				}).then((d) => {
					this.mineObj = Object.assign({}, this.mineObj, d.data)
					this.diaLogNum++
				})
			},
		}
	}
</script>

<style lang="scss">
	@import './study.scss';
	.yd-loading {
		background: #505050 !important;
	}
</style>